@extends('layouts.app')
@section('content')
    <div class="content">
        <div class="row">
            <form method="get" action="{{ route('admin.feedback.index') }}">
                <div class="form-group col-md-2 col-sm-6 col-xs-10">
                    <select name="read_no_read" class="form-control">
                        <option value="">全部</option>
                        <option value="0" {{ $readNoread == "0" ? "selected":""}}>未读</option>
                        <option value="1" {{ $readNoread == "1" ? "selected":""}}>已读</option>

                    </select>
                </div>
                <div class="form-group col-md-2 col-sm-10 col-xs-10">
                    <button class="btn btn-success btn-ms" type="submit">搜索</button>
                </div>
            </form>
        </div>

        <div class="row custom-invoice">
            <table class="table table-striped table-hover">
                <thead>
                <tr>
                    <th>用户昵称</th>
                    <th>用户头像</th>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>投诉内容</th>
                    <th>图片</th>
                    <th>时间</th>
                    <th>是否已读</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                @foreach($data as $item)
                    <tr>
                        <td>{{ $item->nickname }}</td>
                        <td><img src="{{ $item->avatar }}" width="30" /></td>
                        <td>{{ $item->name }}</td>
                        <td>{{ $item->mobile }}</td>
                        <td>{{ $item->content }}</td>
                        <td>
                            @if(!empty($item->image))
                                <a class="btn btn-info btn-xs showHideForm" data-image="{{ $item->image }}"><i class="fa fa-file-image-o"></i> 查看图片</a>
                            @endif
                        </td>
                        <td>{{ $item->created_at->toDateTimeString() }}</td>
                        <td><b>{{ $item->read_noread == 0 ? '否':'是' }}</b></td>
                        <td>
                            @can('feedback-read')
                                @if($item->read_noread == 0)
                                    <a class="btn btn-primary btn-xs"
                                       href="{{ route('admin.feedback.read', ['id' => $item->id]) }}"><i
                                            class="fa fa-check-circle"></i> 已读</a>
                                @endif
                            @endcan
                        </td>

                    </tr>
                @endforeach
                </tbody>
            </table>
            {{ $data->links() }}
        </div>
    </div>
    <div class="modal fade loading custom-hide"  style="width: 100%;text-align: center" id="hideForm" tabindex="-1" role="dialog" aria-labelledby="hideFormLibel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" style="width: 1000px">
            <div  class="content invoice" style="position: relative; margin: auto">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 关闭 </button>
                </div>
                {{--                    <span id="closeHideForm" class="span-X"><i class="fa fa-close"></i></span>--}}
                <div class="row" id = "image-content">
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $('.show-image').on('click', function () {
            var k = $(this).attr('data-image').split(";");
            node = "";
            for(index in k) {
                node += "<div style= \"float:left;margin: 10px;\">\n" +
                    "       <img src=\"" + k[index] + "\" width='100%'>\n" +
                    "   </div>";
            }
            $('#image-content').html(node);
            $("#hideForm").modal('show');
        });
    </script>
@endpush
